<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="utf-8" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { width:100%; height:100% }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<?php echo Zend_Registry::get('HT_Config')->geo->api->key ?>&sensor=false&language=<?php echo Zend_Auth::getInstance()->getIdentity()->locale ?>"></script>
    <script type="text/javascript">
    function initialize() {
        var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var bounds = new google.maps.LatLngBounds();
        <?php $c = 0; ?>
        <?php foreach($this->points as $point) : ?>
        <?php $c++; ?>
        var mkLtln_<?php echo $c ?> = new google.maps.LatLng(<?php echo $point->lat ?>,<?php echo $point->lng ?>);
        var marker_<?php echo $c ?> = new google.maps.Marker({position: mkLtln_<?php echo $c ?>, title:"<?php echo $point->title ?>", icon: '/css/icon/map/<?php echo $point->category ?>.png' });
        marker_<?php echo $c ?>.setMap(map);
        bounds.extend(marker_<?php echo $c . '.position' ?>);
        <?php endforeach ?>
        map.fitBounds(bounds);
      }  
  </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>
</html>